<template>
  <div>
<!--使用draggable组件-->
<div class="itxst">
  <div class="col">
      <div class="title" >国内网站</div>
      <draggable v-model="arr1" group="site"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <transition-group>
          <div class="item" v-for="(item,index) in arr1" :key="item.lable + index">{{item.label}}</div>
        </transition-group>
      </draggable>
  </div>
  <div  class="col">
    <div class="title" >你可以把左边的元素拖到右边</div>
      <draggable v-model="arr2" group="site" animation="300" @add="onAdd" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <transition-group>
          <div class="item" v-for="(item,index) in arr2" :key="item.label + index">{{item.label}}</div>
        </transition-group>
      </draggable>
  </div>
  <!-- <div class="col">
      <div class="title" >国内网站</div>
      <draggable v-model="arrList" group="site1"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <transition-group>
          <div class="item" v-for="(item,index) in arrList" :key="item.lable + index">{{item.label}}</div>
        </transition-group>
      </draggable>
  </div>
  <div  class="col">
    <div class="title" >你可以把左边的元素拖到右边</div>
      <draggable v-model="arr3" group="site1" animation="300" @add="onAdd" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
        <transition-group>
          <div class="item" v-for="(item,index) in arr3" :key="item.label + index">{{item.label}}</div>
        </transition-group>
      </draggable>
  </div> -->
</div>
  </div>
</template>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass{
  background-color:  blue !important;
}
.chosenClass{
  background-color: red !important;
  opacity: 1!important;
}
.dragClass{
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
.itxst{
  margin: 10px;

}
.title{
  padding: 6px 12px;
}
.col{
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius:5px ;
  float: left;
}
.col+.col{
 margin-left: 10px;
}

.item{
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border:  solid 1px #eee;
   background-color: #f1f1f1;
}
.item:hover{
  background-color: #fdfdfd;
  cursor: move;
}
.item+.item{
  border-top:none ;
  margin-top: 6px;
}
</style>
<script>
//导入draggable组件
import draggable from "vuedraggable"
import {selectComponents} from "./index"
import {arrList} from "../myselfForm/index"
export default {
  //注册draggable组件
  components: {
    draggable
  },
  props: {

  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      arr1: selectComponents,
      arrList,
      arr2: [

      ],
      arr3: []
    }
  },
  /**
   * start，add，remove，update，end，choose，unchoose，sort，filter，clone事件
   * 是每当在onStart，使用onAdd，onRemove，的onUpdate，onEnd，onChoose，onUnchoose，
   * 的onSort，onClone由Sortable.js使用相同的参数发射调用。
   */
  methods: {
    //开始拖拽事件
    onStart() {
      // console.log(val)
      this.drag = true
    },
    async onAdd(val) {
      console.log(val)
      console.log(this.arr2)
    },
    //拖拽结束事件
    onEnd() {
      // console.log(val)
      this.drag = false
    }
  }
}
</script>